<template>
  <view class="container">
    <ve-form :model="form" :rules="rules" ref="formRef">
      <ve-card type="none">
        <ve-form-item label="车牌号" :borderBottom="false">{{ form.licenseNo }}</ve-form-item>
        <ve-form-item label="原车型" :borderBottom="false">{{ form.modelName }}</ve-form-item>
      </ve-card>
      <ve-card type="none">
        <ve-form-item label="修改车型为" required prop="modelId" :borderBottom="false">
          <remote-select
            :type="changeModelOption.attrs.type"
            v-model="form.modelId"
            v-model:label="changeModelOption.label"
            :params="{
              modelId: form.modelId,
            }"
          />
        </ve-form-item>
      </ve-card>
    </ve-form>

    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" :loading="loading" @click="handleConfirm">确认</ve-button>
    </ve-bottom-box>

    <ve-confirm titleText="提示" v-model="visible" @confirm="onConfirm" @cancel="onCancel">
      车辆修改车型后，所有相关历史数据都会变更，包含车辆、订单、运维、财务、数据汇总等，是否要变更车型？
    </ve-confirm>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { updateCarModel } from '@/api/asset/car-manager'

  const visible = ref(false)
  const loading = ref(false)
  const form = ref<any>({})
  const formRef = ref<any>()
  const rules = {
    modelId: {
      required: true,
      message: '请选择',
    },
  }
  // 修改车型
  const changeModelOption = {
    prop: 'modelId',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'carModel',
    },
  }

  const handleConfirm = () => {
    formRef.value.validate((valid: any) => {
      if (valid) {
        loading.value = true
        visible.value = true
      }
    })
  }

  const onConfirm = () => {
    console.log('onConfirm', form.value)
    updateCarModel(form.value).then(() => {
      loading.value = false
      visible.value = false
      uni.navigateBack()
    })
  }

  const onCancel = () => {
    loading.value = false
    visible.value = false
  }

  onLoad((options: any) => {
    const { id, modelName, licenseNo, modelId } = JSON.parse(options.record)
    form.value = {
      id,
      modelName,
      licenseNo,
      modelId,
    }
  })
</script>

<style lang="less" scoped>
  .container {
    padding: 12px 12px;
  }
</style>
